<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            {{ table.name }}
            <small>Control panel</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">{{ table.name }}</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content" id="content">
        <div class="row">
            <!-- Left col -->
            <div class="col-md-12">
                <!-- MAP & BOX PANE -->
                <div class="box box-success">
                    <div class="box-header with-border">
                        <h3 class="box-title">{{ table.name }} List</h3>
                        <div class="box-tools pull-right">
                            <a class="btn btn-success" href="/{{ table.name }}/add"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Create</a>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="form-group">
                            <table id="tbReport" class="table table-striped table-hover text-center">
                                <thead>
                                    <tr>
{% for column in table.noForeignKeys %}
                                        <th>{{ column.name }}</th>
{% endfor %}
{% for column in table.foreignKeys %}
                                        <th>{{ column.referenceTable.name }}_name</th>
{% endfor %}
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="row in rows">
{% for column in table.noForeignKeys %}
                                        <th>{[ row.{{ column.name }} ]}</th>
{% endfor %}
{% for column in table.foreignKeys %}
                                        <th>{[ row.{{ column.referenceTable.name }}_name ]}</th>
{% endfor %}
                                        <td width="200px">
                                            <a href="/{{ table.name }}/edit/{[row.id]}" class="btn btn-info btn-sm"><i class="fa fa-fw fa-edit"></i>编辑</a>
                                            <a @click="delete(row, $index)" class="btn btn-danger btn-sm"><i class="fa fa-fw fa-trash-o"></i>删除</a>
                                        </td>
                                    </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="box-footer clearfix">
                    </div>
                    <!-- /.box-body -->
                </div>
            </div>
        </div>
    </section>
    <!-- /.content -->
</div>
<script>
    var domain = new Vue({
        el: '#tbReport',
        data: {
            rows : {{ '{{'}}rows | json_encode{{'}}'}},
        },
        ready:function(){
        },
        methods:{
            delete: function(row, index){
                if (!window.confirm("确认删除？")) { 
                    return;
                }
                var url = '/{{ table.name }}/' + row.id;
                this.$http.delete(url).then(function(response){
                    if(response.data.is_success === true){
                        this.rows.splice(index, 1);
                    }else{
                        alert(response.data.msg);
                    }
                }, function(response){
                    alert('系统异常，请联系管理员');
                });
            },
        },
        watch:{
        }
    });
</script>

